<template>
  <div class="chart-card">
    <div class="top">
      <div class="icon"></div>
      <div class="text">{{ title }}</div>
      <el-button v-if="link" type="primary" link>点击进入&nbsp;&nbsp;>></el-button>
    </div>
    <div class="bottom">
      <slot name="chart"></slot>
    </div>
  </div>
</template>

<script setup lang="ts" name="ChartCard">
defineProps({
  title: {
    type: String,
    default: ""
  },
  link: {
    type: String,
    default: ""
  }
});
</script>

<style scoped lang="scss">
.chart-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  // padding: 24px;
  background: var(--el-bg-color);
  border-radius: 8px;
  .top {
    display: flex;
    column-gap: 12px;
    align-items: start;
    height: 32px;
    padding: 0 8px 0 16px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgb(0 0 1 / 10%);
    .icon {
      width: 4px;
      height: 20px;
      background: var(--el-color-primary);
      border-radius: 0 2px 2px 0;
    }
    .text {
      flex: 1;
      overflow: hidden;
      font-size: 16px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .el-button--primary.is-link {
      margin-top: 4px;
    }
  }
  .bottom {
    flex: 1;
    min-height: 0;
  }
}
</style>
